import { useDispatch, useSelector } from "react-redux"
import numStatus from '@/store/NumStatus'

const View = () => {
    const dispatch = useDispatch()
    //对num的操作
    const { num } = useSelector((state:RootState) => ({
        num: state.handleNum.num
    }))
    const changeNum = () =>{
        dispatch({type:"add3",val:300})
    }
    const changeNum2 = () =>{
         // 异步的写法  redux-thunk的用法  基本格式  dispatch(异步执行的函数)
        dispatch(numStatus.asyncActions.asyncAdd1)
    }
    //对sarr的操作
    const { sarr } = useSelector((state:RootState) => ({
        sarr: state.handleArr.sarr
    }))
    const changeArr = () =>{
        dispatch({type:"sarrpush",val:100})
    }

    
    return (
        <div className="home">
            <p>Page1页面</p>
            <p>{num}</p>
            <button onClick={changeNum}>同步数字按钮</button>
            <button onClick={changeNum2}>异步数字按钮</button>
            <p>{sarr}</p>
            <button onClick={changeArr}>修改数组按钮</button>
        </div>
    )
}

export default View